<template>
  <div class="tips-box noselect" v-cloak>
    {{title}}
  </div>
</template>

<script>
  export default {
    name: 'Tips',
    data() {
      return {
        tips_bl: false
      }
    },
    props: {
      //这里是组件可以接受的参数，也就是相当于面向原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
      title: {
        type: String,//数据类型
        default: ''//默认值
      }

    },
    mounted() {
      this.$nextTick(() => {
        // 2s后消失
        setTimeout(() => {
          var tip_arr = document.getElementsByClassName('tips-box')
          for (var i = 0; i < tip_arr.length; i++) {
            tip_arr[i].remove()
          }
          // this.$destroy();
          // document.body.removeChild(this.$el);
        }, 2000)
      })
    },
    methods: {}
  }
</script>

<style scoped>
  /*加载层*/
  .tips-box {
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: rgba(0, 0, 0, .7);
    position: fixed;
    z-index: 5006;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px
  }

</style>
